<template>
  <div>
    <div class="order-right">
      <!--订单-->
      <div class="order-contents">
        <!-- 订单列表大标题 -->
        <div class="inside-title">
          <h3>我的订单</h3>
        </div>
        <!-- 订单列表内容 -->
        <div class="goods-detail"  @click="toDetail()" v-for="(index) in 3" :key="index">
          <div class="goods-detail-header">
            <div class="goods-detail-title">
              <div class="gd-inside-title">
                <h1>下单成功</h1>
                <div class="gd-time-title">
                  <span>
                    2017-02-11 11:59:30
                    <span class="s-title">&nbsp;</span>
                    &nbsp;订单号：7867473872181848
                  </span>
                </div>
                <div class="gd-cost-1-title">
                  <span> 应付金额: </span>
                </div>
                <div class="gd-cost-2-title">
                  <span> 999 </span>
                </div>
                <div class="gd-cost-3-title">
                  <span> 元 </span>
                </div>
              </div>
              <div class="outer-detail">
                <div class="gd-inside-detail">
                  <div class="gd-inside-detail-img">
                    <img src="./shoes.jpg" />
                    <div class="gd-inside-detail-title-1">
                      <div>洞洞鞋</div>
                      <div>999元&nbsp;×&nbsp;1</div>
                    </div>
                  </div>
                </div>
                <!-- 订单右侧选择分栏 -->
                <div class="gd-detail-button">
                  <div class="gd-inside-detail-button">
                  <div class="button">
                    <a href="javascript:;">订单详情</a>
                  </div>
                </div>
                <div class="gd-inside-detail-button">

                  <div class="button">
                    <a href="javascript:;">申请售后</a>
                  </div>
                </div>
                <div class="gd-inside-detail-button">
                  <div class="button">
                    <a href="javascript:;">联系客服</a>
                  </div>
                </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 分页 -->
        <div class="choose-detail">
          <!-- 上一页图标 -->
          <div class="left-iconfont">
            <span class="iconfont">&#xe62c;</span>
          </div>
          <!-- 静态页数-1 -->
          <div class="choose-num">
            <span>1</span>
          </div>
          <!-- vf假页数 -->
          <div class="choose-num-none" v-for="n in chooseNum" :key="n.id">
            <span>{{ n.num }}</span>
          </div>
          <!-- 下一页图标 -->
          <div class="right-iconfont">
            <span class="iconfont">&#xe62b;</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from "vuex";
export default {
  data() {
    return {
      // 分页假页数数据
      chooseNum: [
        {
          id: 0,
          num: 2,
        },
        {
          id: 1,
          num: 3,
        },
        {
          id: 2,
          num: 4,
        },
        {
          id: 3,
          num: 5,
        },
        {
          id: 4,
          num: 6,
        },
        {
          id: 5,
          num: 7,
        },
      ],
    };
  },
  computed: {
    // 计算仓库属性
    ...mapState({
      // orderList: (state) => state.order.orderList,
      // orderDetail: (state) => state.order.orderDetail,
    }),
  },
  mounted() {
    //根据用户id获取订单列表
    this.$store.dispatch("getOrderListByUserId",{ouid:1});
    //根据订单id获取订单详情
    // this.$store.dispatch("getOrderDetailByOrderId");
  },
  methods:{
    toDetail(){
      console.log("sfddsfsd")
      this.$router.push("/center/orderdetail")
    }
  }
};
</script>

<style lang="less" >
//右边
.order-right {
  float: right;
  width: 83.33%;
  height: auto;
  box-shadow: 0px 0px 10px 1px rgba(254, 188, 144, 0.5);

  //订单部分
  .order-contents {
    margin: 0px 20px 15px 20px;
    //标题
    .inside-title {
      margin-bottom: 22px;
      height: 100px;

      h3 {
        width: 500px;
        padding: 12px 10px;
        font-size: 30px;
        font-weight: 400;
        position: relative;
        left: 20px;
        top: 30px;
      }
    }
  }
}
// 商品边框动画
.goods-detail {
  width: 100%;
}

.goods-detail-header {
  width: 100%;
  // height: 500px;
  //   text-indent: 1em; 字体偏移
  cursor: pointer;
  //   letter-spacing: 2px; 字间空格
  margin: 15px 0;
  background: none;
  border: 0;
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
  transition: color 0.25s;
  box-shadow: 0px 0px 10px 1px rgba(254, 188, 144, 0.5);
}

.goods-detail-header::before,
.goods-detail-header::after {
  box-sizing: inherit;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}

.goods-detail-header::before,
.goods-detail-header::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
}

.goods-detail-header::before {
  top: 0;
  left: 0;
}

.goods-detail-header::after {
  bottom: 0;
  right: 0;
}

/* 文字 */
// .yespost:hover {
//   color: #ff5c00;
// }
.goods-detail-header:hover::before,
.goods-detail-header:hover::after {
  width: 100%;
  height: 100%;
}

.goods-detail-header:hover::before {
  border-top-color: #ff5c00;
  border-right-color: #ff5c00;
  transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}

.goods-detail-header:hover::after {
  border-bottom-color: #ff5c00;
  border-left-color: #ff5c00;
  transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s,
    height 0.25s ease-out 0.75s;
}

// 订单列表界面
.gd-inside-title {
  width: 100%;
  height: 130px;
  background-color: rgba(254, 188, 144, 0.1);
  box-shadow: 0px 0px 10px 1px rgba(254, 188, 144, 0.5);
}

.gd-inside-title h1 {
  position: relative;
  left: 50px;
  top: 25px;
  color: #ff5c00;
  font-size: 25px;
  width: 300px;
}

.gd-time-title {
  position: relative;
  top: 50px;
  left: 50px;
  font-size: 15px;
  width: 500px;
}
.s-title {
  border-right: 1px solid #bbb;
}

.gd-cost-1-title {
  width: 100px;
  position: relative;
  top: 30px;
  left: 700px;
  font-size: 15px;
}

.gd-cost-2-title {
  width: 100px;
  position: relative;
  top: -20px;
  left: 780px;
  font-size: 40px;
}

.gd-cost-3-title {
  width: 30px;
  position: relative;
  top: -42px;
  left: 855px;
  font-size: 15px;
}

.outer-detail {
  width: 100%;
  display: flex;
  .gd-inside-detail {
    width: 600px;
    height: 200px;
    padding: 0px 30px;
    .gd-inside-detail-img {
      display: flex;
      padding: 23px 0px;
      img {
        width: 150px;
        height: 150px;
      }
      .gd-inside-detail-title-1 {
        width: 422px;
        font-size: 14px;
        color: #333;
        padding: 50px 80px 50px 20px;
      }
    }
  }
}
.gd-inside-detail-button {
  width: 250px;
  height: 40px;
  // background-color: #000;
  padding: 10px 0px 0px 30px;
  .button {
    width: 120px;
    height: 30px;
    margin: 5px 30px 5px auto;
    text-align: center;
    line-height: 30px;
    border: 1px solid #757575;
  }
}
.gd-detail-button{
  padding: 20px 0px 0px 0px;
}
// 分页
.choose-detail {
  width: 100%;
  // height: 60px;
  padding: 15px 0px;

  text-align: center;
  .left-iconfont {
    display: inline-block;
    width: 50px;
    .iconfont {
      font-size: 24px;
      color: #ff5c00;
    }
  }
  .choose-num {
    display: inline-block;
    width: 60px;
    font-size: 24px;
    height: 32px;
    margin: 0px 5px;
    padding: 3px 0px;
    background-color: #ff5c00;
    color: #fff;
    border-radius: 5px;
  }
  .choose-num-none {
    display: inline-block;
    width: 60px;
    font-size: 24px;
    height: 32px;
    margin: 0px 5px;
    padding: 3px 0px;
    border-radius: 5px;
    background-color: rgb(250, 206, 173);
    color: #fff;
  }
  .right-iconfont {
    display: inline-block;
    width: 50px;
    .iconfont {
      font-size: 24px;
      color: #ff5c00;
    }
  }
}
</style>